/**
* Created by wl
* 项目管理>持有中-详情页
*/
<template>
    <div>
        <div class="right">
            <csHeader :itemId="id" ref="headerInfo"></csHeader>
            <el-tabs type="border-card" class="ca-tabs ca-m-t-15" @tab-click="handleClick" :value="tabIndex">
                <el-tab-pane :disabled="!isAuth0">
                    <csRedDot slot="label" :label="tabArr[0]" :showDot="dotStateList[0]"></csRedDot>
                    <div v-if="activeIndex == 0">
                        <csProjectDetail></csProjectDetail>
                        <csProjectManager></csProjectManager>
                        <csKeyProtocol></csKeyProtocol>
                    </div>
                </el-tab-pane>
                <el-tab-pane :disabled="!isAuth1">
                    <csRedDot slot="label" :label="tabArr[1]" :showDot="dotStateList[1]"></csRedDot>
                    <div v-if="activeIndex == 1">
                        <csHighManager></csHighManager>
                        <csShareholder></csShareholder>
                    </div>
                </el-tab-pane>
                <el-tab-pane :disabled="!isAuth2">
                    <csRedDot slot="label" :label="tabArr[2]" :showDot="dotStateList[2]"></csRedDot>
                    <div v-if="activeIndex == 2">
                        <csInvestmentReduction @updateHeaderInfo="updateHeader"></csInvestmentReduction>
                    </div>
                </el-tab-pane>
                <el-tab-pane :disabled="!isAuth3">
                    <csRedDot slot="label" :label="tabArr[3]" :showDot="dotStateList[3]"></csRedDot>
                    <div v-if="activeIndex == 3">
                        <csFinancialEcpectation></csFinancialEcpectation>
                        <csAnnualReport></csAnnualReport>
                        <csFinancialData :typeBak='true' :dataType='2' :isAuth="isAuthFinance" :addAuth="'持有中项目-财务数据-编辑'"></csFinancialData>
                    </div>
                </el-tab-pane>
                <el-tab-pane :disabled="!isAuth4">
                    <csRedDot slot="label" :label="tabArr[4]" :showDot="dotStateList[4]"></csRedDot>
                    <div v-if="activeIndex == 4">
                        <csInvestmentServices :itemId="id"></csInvestmentServices>
                    </div>
                </el-tab-pane>
                <el-tab-pane :disabled="!isAuth5">
                    <csRedDot slot="label" :label="tabArr[5]" :showDot="dotStateList[5]"></csRedDot>
                    <div v-if="activeIndex == 5">
                        <csProjectFile></csProjectFile>
                    </div>
                </el-tab-pane>
                <el-tab-pane :disabled="!isAuth6">
                    <csRedDot slot="label" :label="tabArr[6]" :showDot="dotStateList[6]"></csRedDot>
                    <div v-if="activeIndex == 6">
                        <csEarlyWarning :itemId="id"></csEarlyWarning>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    // import {api} from './api';
    // import {STATUS_HTTP_SUCCESS, apiHttp} from '__service/csHttp';
    import { getDetailRemind, read, isNoAuth } from '__service/utils';
    export default {
        data() {
            return {
                isAuth0: isNoAuth('持有中项目-项目详情-查看'),
                isAuth1: isNoAuth('持有中项目-高管/股东-查看'),
                isAuth2: isNoAuth('持有中项目-投资减持-查看'),
                isAuth3: isNoAuth('持有中项目-财务数据-查看'),
                isAuth4: isNoAuth('持有中项目-投资服务-查看'),
                isAuth5: isNoAuth('持有中项目-项目文件-查看'),
                isAuth6: isNoAuth('持有中项目-项目预警-查看'),
                isAuthFinance: isNoAuth('持有中项目-财务数据-编辑'),
                dialogVisible: false,
                tabArr: ['项目详情', '高管/股东', '投资减持', '财务数据', '投资服务', '项目文件', '项目预警'],
                id: this.$route.params.itemId,
                showBetting: true,
                preId: '',
                dotStateList: [false, false, false, false, false, false, false], // 小红点状态
                // 当前选中的tab
                activeIndex: 0,
                tabIndex: this.$route.params.tabIndex + '' || '0', //页面索引
            }
        },
        watch: {
        },
        props: {},
        mounted() {
            let ind = {
                index: this.$route.params.tabIndex.toString()
            }
            this.handleClick(ind)
            // 获取红点
            this.getDotList();
            // 为子组件创建的第三方组件方法
            this.$root.Dot.$on('getDotList', () => {
                this.getDotList();
            })
        },
        beforeRouteEnter(to, from, next) {
            next( vm => {
                // 遍历所有tab 权限
                if (!isNoAuth('持有中项目-' + vm.tabArr[vm.tabIndex] + '-查看')) {
                  let flag = false;
                  for (let i = vm.tabIndex; i < vm.tabArr.length; i++) {
                      if (isNoAuth('持有中项目-' + vm.tabArr[i] + '-查看')) {
                          vm.tabIndex = i.toString();
                          flag = true;
                          break;
                      }
                  }
                  if (!flag) {
                    for (let i = 0; i < vm.tabIndex; i++) {
                        if (isNoAuth('持有中项目-' + vm.tabArr[i] + '-查看')) {
                            vm.tabIndex = i.toString();
                            flag = true;
                            break;
                        }
                    }
                  }
                  if (!flag) {
                      vm.$message({
                          message: '没有此页面的操作权限',
                          type: 'error',
                          center: true
                      });
                      vm.$router.replace({name: 'personal-center', params: {tabIndex: '0', openWindow: false}})
                  }
                }
            })
        },
        methods: {
            showPreInvestment(preId) {
                this.$router.push({ name: 'pre-investment-project', params: { itemId: preId,openWindow: true}})
            },
            // 设置小红点状态
            async getDotList() {
                const dotList = await getDetailRemind({ dataId: this.$route.params.itemId, dataType: 2 });
                dotList.map(x => {
                    this.dotStateList[x.dataTab] = true;
                });
                this.dotStateList = this.dotStateList.concat([]);
            },
            // 切换tab
            handleClick(val) {
                this.activeIndex = val.index;
                //去除小红点
                read({ dataId: this.$route.params.itemId, dataTab: val.index, dataType: 2 });
                this.dotStateList[val.index] = false;
                this.dotStateList = this.dotStateList.concat([]);
                // 设置小红点状态 end
            },
            // 刷新头部信息
            updateHeader() {
                this.$refs.headerInfo.getHeaderInfo()
            },
        },
        beforeDestroy() {
            // 销毁小红点第三方vue
            this.$root.Dot.$off('getDotList');
        },
        components: {
            csHeader: require('./header/index'),
            csProjectDetail: require('./project-detail/project-details/index'), //项目详情
            csProjectManager: require('./project-detail/project-manager/index'), //项目管理人员
            csKeyProtocol: require('./project-detail/key-protocol/index'), //关键协议
            csHighManager: require('./executive-shareholders/executive/index'), //公司高管
            csShareholder: require('./executive-shareholders/shareholder/index'), //股东信息
            csInvestmentReduction: require('./investment-reduction/index'), //投资减持
            csFinancialEcpectation: require('./financial-data/financial-expectation/index'), //财务预期
            csProjectFile: require('./project-file/index'), //项目文件
            csAnnualReport: require('./financial-data/annual-report/index'), //年报
            csFinancialData: require('__components/financial-data/index'), //财务数据
            csInvestmentServices: require('./investment-services'), //服务动态
            csEarlyWarning: require('./early-warning'), //tab预警
            csRedDot: require('__components/red-dot'), // 小红点
        },
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.use-list-pagination{
    margin: 31px  25%;
}
.ca-right {
    height: 20px;
    width: 100%;
}
.ca-right-5 {
    float: right;
    margin-right: 10px;
}
</style>
